import ProCard from '@ant-design/pro-card';
import { useState } from 'react';
import { history } from 'umi'
import { Tabs, Avatar, Input, Button, message } from 'antd';
import { updateUserApi } from '@/services/ant-design-pro/api'
const { TabPane } = Tabs;
export default function Index() {
    const userinfo = JSON.parse(localStorage.getItem('userinfo') as string);
    // 用户名
    const [name, setname] = useState(userinfo.name);
    // 邮箱
    const [email, setemail] = useState(userinfo.email);
    // 原密码
    const [oldPassword,setold] = useState('');
    // 新密码
    const [newPassword,setnew] = useState('');
    // 确认密码
    const [surePwd,setSure] = useState('');
    // 设置用户名
    const setVal = (e: any) => {
        setname(e.target.value);
    }
    // 设置邮箱
    const setEam = (e: any) => {
        setemail(e.target.value);
    }
    // 保存信息
    const saveuser = async () => {
        let data = { ...userinfo, name, email }
        let res = await updateUserApi(data);
        if (res.success) {
            message.success('更新成功~3秒后重新登录');
            setTimeout(() => {
                localStorage.removeItem('userinfo');
                localStorage.removeItem('token');
                history.push('/user/login');
            }, 3000);
        }
    }
    // 旧密码
    const oldtodo = (e:any)=>{
        setold(e.target.value)
    }
    const newtodo = (e:any)=>{
        setnew(e.target.value)
    }
    const newtodo2 = (e:any)=>{
        setSure(e.target.value);
    }
    return (
        <div>
            <ProCard title='个人资料'>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="基本设置" key="1" style={{ height: 'auto' }}>
                        <Avatar style={{ width: 100, height: 100 }} src={userinfo.avatar}></Avatar>
                        <div style={{ marginTop: '20px' }}>
                            <label htmlFor="name">用户名：</label>
                            <Input id='name' style={{ width: '200px' }} value={name} onChange={setVal}></Input>
                        </div>
                        <div style={{ margin: '30px 0px', marginLeft: '14px' }}>
                            <label htmlFor="email">邮箱：</label>
                            <Input id='email' style={{ width: '200px' }} value={email} onChange={setEam}></Input>
                        </div>
                        <Button type="primary" onClick={saveuser}>保存</Button>
                    </TabPane>
                    <TabPane tab="更新密码" key="2">
                        <div>
                            <label htmlFor="oldpwd">原密码：</label>
                            <Input id='oldpwd' type='password' style={{ width: '200px' }} value={oldPassword} onChange={oldtodo}></Input>
                        </div>
                        <div style={{margin:'20px 0px'}}>
                        <label htmlFor="newpwd">新密码：</label>
                        <Input id='newpwd' type='password' style={{ width: '200px' }} value={newPassword} onChange={newtodo}></Input>
                        </div>
                        <div>
                        <label htmlFor="newpwd2">确认密码：</label>
                        <Input id='newpwd2' type='password' style={{ width: '200px' }} value={surePwd} onChange={newtodo2}></Input>
                        </div>
                        <Button style={{marginTop:'20px'}} type="primary" >更新</Button>
                    </TabPane>
                </Tabs>
            </ProCard>
        </div>
    )
}
